<!--
 * @Author: lilin_:）
 * @version: 1.0
 * @Descripttion: 提成明细
 * @Date: 2021-08-29 18:13:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-03-30 11:42:03
-->
<template>
	<div class="system-user-container">
		<el-card class="box-card">
			<div>
				<div class="my_btn_lay">
					<div class="my_flex my_btn" @click="searchEvent">
						<div class="my_flex_layout">
							<i class="vxe-icon--search"></i>
							<span>查找</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="resetEvent">
						<div class="my_flex_layout">
							<i class="vxe-icon--refresh"></i>
							<span>重置</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="addDefaultBlank">
						<div class="my_flex_layout">
							<i class="vxe-icon--plus"></i>
							<span>新增</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="deleteTable">
						<div class="my_flex_layout">
							<i class="fa fa-trash-o"></i>
							<span>删除</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="funnelEvent">
						<div class="my_flex_layout">
							<i class="vxe-icon--download"></i>
							<span>导出</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="printTab">
						<div class="my_flex_layout">
							<i class="vxe-icon--print"></i>
							<span>打印</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="showAmendFun">
						<div class="my_flex_layout">
							<i class="el-icon-edit"></i>
							<span>编辑</span>
						</div>
					</div>
					<div class="my_flex my_btn ml20" @click="editClosedEvent">
						<div class="my_flex_layout">
							<i class="el-icon-folder-add"></i>
							<span>保存</span>
						</div>
					</div>
				</div>

				<vxe-form :data="selectFrom" title-align="left" prevent-submit title-colon>
					<vxe-form-item title="员工" field="contactPerson" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.contactPerson" placeholder="请选择员工">
								<el-option v-for="item in selectFrom.unitsData" :key="item.id" :label="item.contactPerson" :value="item.id"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<vxe-form-item title="提成状态" field="all" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.all" placeholder="请选择提成状态">
								<el-option v-for="item in selectFrom.allData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<vxe-form-item title="项目名称" field="contractID" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.contractID" placeholder="请选择项目名称">
								<el-option v-for="item in selectFrom.contractData" :key="item.id" :label="item.contractName" :value="item.id"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<vxe-form-item title="备注" field="remark" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-input v-model="data.remark" placeholder="请输入备注" clearable />
						</template>
					</vxe-form-item>

					<vxe-form-item title="开始时间" field="time" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="data.time1" type="date" placeholder="开始时间"> </el-date-picker>
						</template>
					</vxe-form-item>

					<vxe-form-item title="结束时间" field="time" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="data.time2" type="date" placeholder="结束日期"> </el-date-picker>
						</template>
					</vxe-form-item>

					<!-- <vxe-form-item title="开票时间" field="time" span="6" :item-render="{}">
						<template #default="{ data }">
							<el-date-picker
								style="width: 100%"
								v-model="data.time"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="YYYY-MM-DD HH:mm:ss"
							>
							</el-date-picker>
						</template>
					</vxe-form-item> -->

					<!-- <vxe-form-item align="right" span="24" collapse-node>
						<template #default>
							<vxe-button status="primary" content="搜索" @click="searchEvent"></vxe-button>
							<vxe-button content="重置" @click="resetEvent"></vxe-button>
						</template>
					</vxe-form-item> -->
				</vxe-form>
			</div>

			<!-- <vxe-toolbar ref="xToolbar" custom>
				<template #buttons>
					<vxe-button type="text" disabled icon="fa fa-plus" content="新增" @click="addDefaultBlank"></vxe-button>
					<vxe-button type="text" icon="fa fa-trash-o" content="删除" @click="deleteTable"></vxe-button>
				</template>
				<template #tools>
					<vxe-button type="text" icon="vxe-icon--print" class="tool-btn" @click="printTab"></vxe-button>
					<vxe-button type="text" icon="vxe-icon--download" class="tool-btn" @click="funnelEvent"></vxe-button>
				</template>
			</vxe-toolbar> -->
			<!-- @edit-closed="editClosedEvent" -->
			<vxe-table
				:scroll-x="{ enabled: false }"
				:scroll-y="{ enabled: false }"
				align="center"
				class="mytable-style"
				:row-class-name="rowClassName"
				height="780"
				border
				keep-source
				ref="xTable1"
				:export-config="{}"
				resizable
				show-overflow
				:data="tableData"
				:edit-config="{ trigger: 'manual', mode: 'row',icon: 'false' }"
				@checkbox-all="selectAllChangeEvent1"
				@checkbox-change="selectChangeEvent1"
				show-footer
				:footer-method="footerMethod"
			>
				<vxe-column align="center" type="checkbox" width="60"></vxe-column>
				<vxe-column align="center" type="seq" title="序号" width="60"></vxe-column>

				<vxe-column field="staffId" title="员工名称" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-select clearable filterable v-model="scope.row.staffId">
							<el-option v-for="item in selectFrom.unitsData" :key="item.id" :label="item.contactPerson" :value="item.id"></el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getSelectLabel(row.staffId, selectFrom.unitsData) }}</template>
				</vxe-column>
				<vxe-column
					width="110"
					field="time"
					title="时间"
					:edit-render="{ name: '$input', placeholder: '请选择日期', props: { type: 'date', placeholder: '请选择日期' } }"
				></vxe-column>

				<vxe-column field="receiveId" title="到款单位" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-select clearable filterable v-model="scope.row.receiveId">
							<el-option
								v-for="item in selectFrom.receiveIdData"
								:key="item.id"
								:label="item.unitName"
								:value="item.id"
								@click="getcontractNameList(item.id, scope.row)"
							></el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getSelectLabel_unitName(row.receiveId, selectFrom.receiveIdData) }}</template>
				</vxe-column>
				<!-- <vxe-column field="contractId" title="项目" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column> -->

				<vxe-column field="contractId" title="项目" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-select clearable filterable v-model="scope.row.contractId" @change="change_selValue_balance(scope.row)">
							<el-option v-for="item in scope.row.contractNameList" :key="item.id" :label="item.contractName" :value="item.id"></el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getSelectLabel_contractName(row.contractId, row.contractNameList) }}</template>
				</vxe-column>

				<!-- contractNameList -->

				<vxe-column field="amount" title="到款金额" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.amount" @change="change_selValue_fs(scope.row)"></el-input>
					</template>
					<template v-slot="{ row }">{{ transitionNumber(row.amount) }}</template>
				</vxe-column>

				<vxe-column field="firstClassCommission" sort-type="" filter-method="" title="一类提成额" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.firstClassCommission" @change="change_selValue_balance(scope.row)">
							<!-- <template #append>%</template> -->
						</el-input>
					</template>
					<template v-slot="{ row }">{{ row.firstClassCommission }}</template>
				</vxe-column>

				<vxe-column field="secondClassCommission" title="二类提成额" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.secondClassCommission" @change="change_selValue_balance(scope.row)">
							<!-- <template #append>%</template> -->
						</el-input>
					</template>
					<template v-slot="{ row }">{{ row.secondClassCommission }}</template>
				</vxe-column>

				<vxe-column field="secondClassBill" title="一类提成发票" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.secondClassBill" @change="change_selValue_balance(scope.row)"></el-input>
					</template>
				</vxe-column>

				<vxe-column field="balance" title="二类成本发票" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.balance"></el-input>
					</template>
					<template v-slot="{ row }">{{ transitionNumber(row.balance) }}</template>
				</vxe-column>

				<vxe-column field="remark" title="备注" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>
			</vxe-table>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, ref, toRaw, onMounted, nextTick, toRef } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
	axios_SelList,
	axios_commissionselList,
	axios_commissionselup,
	axios_commissionadd,
	axios_commissionseldel,
	axios_selListByContractUnitId, // 通过到款单位查询项目
	axios_selValue_fs, //传入到款金额 获取第一第二提成额
	axios_selValue_balance, //计算发票余额
} from '/@/api/basicsUrl/index';
import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';

import { GenNonDuplicateID } from '/@/utils/formatTime';
import { transitionNumber } from '/@/utils/transitionNumber';
import { axios_selListByContractUnit } from '/@/api/invoiceLedger/index';
export default {
	name: 'BorrowMoney',
	setup() {
		const xTable1 = ref({} as VxeTableInstance);
		const xToolbar = ref({} as VxeToolbarInstance);

		// 打印样式
		// 打印样式
		const printStyle = `
            .title {
              text-align: center;
            }
            .my-list-row {
              display: inline-block;
              width: 100%;
            }
            .my-list-col {
              float: left;
              width: 33.33%;
              height: 28px;
              line-height: 28px;
            }
            .my-bottom {
              font-size: 12px;
            }
            .my-top {
              margin-bottom: 5px;
            }
            .my-bottom {
              margin-top: 30px;
              text-align: right;
            }
            `;

		// 打印顶部内容模板
		const topHtml = `
            <h1 class="title">出货单据</h1>
            <div class="my-top">
              <div class="my-list-row">
                <div class="my-list-col">商品名称： </div>
                <div class="my-list-col">发货单号：X2665847132654</div>
                <div class="my-list-col">发货日期：2020-09-20</div>
              </div>
              <div class="my-list-row">
                <div class="my-list-col">收货姓名： </div>
                <div class="my-list-col">收货地址：火星第七区18号001</div>
                <div class="my-list-col">联系电话：10086</div>
              </div>
            </div>
            `;

		// 打印底部内容模板
		const bottomHtml = `
            <div class="my-bottom">
              <div class="my-list-row">
                <div class="my-list-col"></div>
                <div class="my-list-col">创建人： </div>
                <div class="my-list-col">创建日期：2020-09-20</div>
              </div>
            </div>
            `;
		/**
		 * @Author: lilin_:）
		 * @name: 默认空白数组
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		let defaultBlankData = [
			{
				iswebAdd: true,
				webid: GenNonDuplicateID(),
				staffId: '', //员工名称
				time: '', //时间
				receiveId: '', //到款单位
				contractId: '', //项目
				amount: '', //到款金额
				firstClassCommission: '', //一类提成额
				secondClassCommission: '', //二类提成额
				secondClassBill: '', //一类提成发票
				balance: '', //二类成本发票
				remark: '', //备注
			},
		];
		const state: any = reactive({
			showSun: {
				v1: 0,
				v2: 0,
				v3: 0,
				v4: 0,
				v5: 0,
			}, // 合计数据
			addList: [], //前端加的数据
			responseData: [], //后端返回的数据

			selectFrom: {
				time1: '', //时间
				time2: '', //时间
				on: 0, //默认是0，1是点击
				remark: '', //备注

				contactPerson: '', //联系人
				all: '', //提成状态全部0 已提成1 未提成2
				allData: [
					{ label: '全部', value: '0' },
					{ label: '已经提成', value: '1' },
					{ label: '未提成', value: '2' },
				], //单位类型1供应商2客户3公司员工
				unitsData: [], //单位搜索的数据和联系人一样
				receiveIdData: [], //到款单位
				contractID: '', //项目名称搜索
				contractData: [], //数据
			},
			tableData: [], //表格数据
			selecttableData: [], //选择的数组
		});

		const selectAllChangeEvent1: VxeTableEvents.CheckboxAll = ({ checked, records }: any) => {
			console.log(checked ? '所有勾选事件' : '所有取消事件', records);
			state.selecttableData = records;
		};

		const selectChangeEvent1: VxeTableEvents.CheckboxChange = ({ checked, records }: any) => {
			// 重置所有高亮
			state.tableData.forEach((item2: any) => {
				item2.hghligHt = false;
			});

			console.log(checked ? '勾选事件' : '取消事件', records);
			state.selecttableData = records;
			state.selecttableData.forEach((item: any) => {
				if (item.iswebAdd) {
					// 前端的数据
					state.tableData.forEach((item2: any) => {
						if (item.webid == item2.webid) {
							item2.hghligHt = true;
						}
					});
				} else {
					state.tableData.forEach((item2: any) => {
						if (item.id == item2.id) {
							item2.hghligHt = true;
						}
					});
				}
			});
		};
		// 查询当前的项目名称全部
		const getProjectData = async () => {
			let resData: any = await axios_selListByContractUnit();

			state.selectFrom.contractData = resData.obj;
			// console.log(  toRaw(resData) , '我三项目的数据');
		};

		/**
		 * @Author: lilin_:）
		 * @name: 获取通讯录单位类型1供应商2客户3公司员工
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const getProjectName = async () => {
			let resData: any = await axios_SelList({ unitName: '', contactPerson: '', type: '3' });
			state.selectFrom.unitsData = resData.obj;
			console.log(toRaw(state.selectFrom.unitsData), '借款人数据');

			// state.tableData = resData.obj;
			// data1 = resData.obj;
			// 到款单位
			let resData2: any = await axios_SelList({ unitName: '', contactPerson: '', type: '2' });
			state.selectFrom.receiveIdData = resData2.obj;
			console.log(resData2.obj, 'resData2.obj');
		};

		/**
		 * @Author: lilin_:）
		 * @name: 获取借款明细
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const get_TabaDat = () => {
			// let subTme = ''; //判断是否有时间
			// if (state.selectFrom.time) {
			// 	subTme = `${state.selectFrom.time[0]}_${state.selectFrom.time[1]}`;
			// }
			state.addList = [];
			let params = {
				time1: state.selectFrom.time1, //联系人id
				time2: state.selectFrom.time2, //联系人id
				remark: state.selectFrom.remark, //备注
				on: state.selectFrom.on,
				staffId: state.selectFrom.contactPerson, //联系人id
				all: state.selectFrom.all,
				contractId: state.selectFrom.contractID, //项目
			};
			// console.log(params, '我是提交的参数');
			axios_commissionselList(params).then((res: any) => {
				console.log(res, '1111111111');
				state.responseData = res.obj;
				state.tableData = [...state.responseData, ...state.addList];
				state.showSun = res.data;
			});
		};

		const searchEvent: VxeFormEvents.Submit = async () => {
			state.selectFrom.on = 1;
			get_TabaDat();
			// VXETable.modal.message({ content: '查询事件', status: 'info' });
		};

		/**
		 * @Author: lilin_:）
		 * @name: 重置搜索表单
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const resetEvent: VxeFormEvents.Reset = async () => {
			state.selectFrom.time1 = ''; //清空时间
			state.selectFrom.time2 = ''; //清空时间
			state.selectFrom.contactPerson = ''; //联系人
			state.selectFrom.all = ''; //联系人
			state.selectFrom.contractID = ''; //项目
			state.selectFrom.remark = ''; //备注

			state.selectFrom.on = 0;
			await get_TabaDat();
			// VXETable.modal.message({ content: '重置事件', status: 'info' });
		};

		onMounted(() => {
			get_TabaDat();

			getProjectName(); //单位名称
			getProjectData(); //项目
		});

		//实时更新
		const editClosedEvent: VxeTableEvents.EditClosed = ({ row, column }) => {
			if (state.selecttableData.length == 1) {
				let row = state.selecttableData[0];
				console.log(toRaw(row), '11111');
				if (row.iswebAdd) {
					// 走保存接口
					axios_commissionadd(row).then((res: any) => {
						if (res.code == 200) {
							state.selectFrom.on = 1; // //默认是0，1是点击
							get_TabaDat(); //列表
							VXETable.modal.message({ content: '新增成功!', status: 'success' });
						}
					});
				} else {
					axios_commissionselup(row).then((res: any) => {
						if (res.code == 200) {
							state.selectFrom.on = 1;
							get_TabaDat();
							VXETable.modal.message({ content: '编辑成功！', status: 'success' });
						}
					});
				}
			} else if (state.selecttableData.length == 0) {
				VXETable.modal.message({ content: '您还没有选中行', status: 'warning' });
			} else {
				VXETable.modal.message({ content: '只能选中一行编辑', status: 'warning' });
			}
		};

		/**
		 * @Author: lilin_:）
		 * @name: 关联表格
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		nextTick(() => {
			// 将表格和工具栏进行关联
			const $table = xTable1.value;
			const $toolbar = xToolbar.value;
			$table.connect($toolbar);
		});

		/**
		 * @Author: lilin_:）
		 * @name: 新增空白行
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const addDefaultBlank = () => {
			const $table = xTable1.value;
			let addArry = defaultBlankData.map((item: any) => {
				return {
					...item,
					...{
						webid: GenNonDuplicateID(),
						contractNameList: [],
					},
				};
			});
			let row = addArry[0];
			state.addList.unshift(row);
			state.tableData = [...state.responseData, ...state.addList];
			$table.clearCheckboxRow();
			$table.toggleCheckboxRow(state.addList[0]); //默认选中第一行
			state.selecttableData = [state.addList[0]]; //拿到选择数据
			$table.setActiveRow(row);
			ElMessage.success({
				message: '新增1行空白栏',
				type: 'success',
			});
			// 计算滚动高度
			let heightpx = state.responseData.length * 47;
			setTimeout(() => {
				document.getElementsByClassName('vxe-table--body-wrapper')[0].scrollTo(0, heightpx);
			}, 100);
		};

		/**
		 * @Author: lilin_:）
		 * @name: 删除数据
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const deleteTable: any = async () => {
			let webAddArry: any = [];
			let reeData: any = [];
			state.selecttableData.forEach((item: any) => {
				if (item.iswebAdd == true) {
					webAddArry.push(item);
				} else {
					reeData.push(item);
				}
			});
			// 判断前端数据是否有值
			let webDelet = () => {
				if (webAddArry.length != 0) {
					// 前端删除
					state.tableData = state.tableData.filter((item: any) => {
						return !webAddArry.find((_item: any) => _item.webid === item.webid);
					});
				}
			};

			let resDelet = async () => {
				if (reeData.length != 0) {
					let { code }: object = await axios_commissionseldel(
						reeData.map((item: any) => {
							return item.id;
						})
					);

					// console.log(code, '11111111');
					if (code == 200) {
						state.selectFrom.on = 1;
						get_TabaDat();
					}
				}
			};
			await resDelet();
			await webDelet();
		};

		/**
		 * @Author: lilin_:）
		 * @name: 高级导出功能
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const funnelEvent = () => {
			const $table = xTable1.value;
			$table.openExport();
		};

		/**
		 * @Author: lilin_:）
		 * @name: 打印表格
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const printTab = () => {
			const $table = xTable1.value;
			$table.print({
				// sheetName: '打印发票台账',
				sheetName: '提成明细',
				style: printStyle, //自定义样式
				columns: [
					{ field: 'seq' },
					{ field: 'staffId' },
					{ field: 'time' },
					{ field: 'receiveId' },
					{ field: 'contractId' },
					{ field: 'amount' },
					{ field: 'firstClassCommission' },
					{ field: 'secondClassCommission' },
					{ field: 'secondClassBill' },
					{ field: 'balance' },
					{ field: 'remark' },
				],
				beforePrintMethod: ({ content }) => {
					// 拦截打印之前，返回自定义的 html 内容
					// return topHtml + content + bottomHtml;
					return content;
				},
			});
		};

		// 展示内容下拉搜索
		const getSelectLabel = (value, list) => {
			let item = list.find((item) => item.id == value);
			return item ? item.contactPerson : null;
		};

		const getSelectLabel_unitName = (value, list) => {
			let item = list.find((item) => item.id == value);
			return item ? item.unitName : null;
		};

		const getSelectLabel_contractName = (value, list) => {
			let item = list.find((item) => item.id == value);
			return item ? item.contractName : null;
		};

		const getcontractNameList = async (id: any, item: any) => {
			let { code, obj } = await axios_selListByContractUnitId({
				contractUnitId: id,
			});
			console.log(item, '111111111111');

			if (code == 200) {
				//查找到对应数组加上字段
				if (item.iswebAdd) {
					state.tableData.forEach((element) => {
						if (element.webid == item.webid) {
							element.contractNameList = obj;
							element.contractId = null;
						}
					});
				} else {
					state.tableData.forEach((element) => {
						if (element.id == item.id) {
							element.contractNameList = obj;
							element.contractId = null;
						}
					});
				}

				// item.contractNameList = toRef(obj);
				// console.log(obj, '111111111');
			}
			// console.log(code, obj, '111111111');
		};

		let change_selValue_fs = (item: any) => {
			axios_selValue_fs({
				value: item.amount,
				contractId: item.contractId,
			}).then((res) => {
				if (res.code == 200) {
					if (item.iswebAdd) {
						// 前端的数据
						state.tableData.forEach((item_data, itemdata_index) => {
							if (item_data.webid == item.webid) {
								// console.log(itemdata_index,'itemdata_index')
								item_data.firstClassCommission = res.data.first;
								item_data.secondClassCommission = res.data.second;
							}
						});
					} else {
						state.tableData.forEach((item_data, itemdata_index) => {
							if (item_data.id == item.id) {
								item_data.firstClassCommission = res.data.first;
								item_data.secondClassCommission = res.data.second;
							}
						});
					}
				}
			});
		};

		// 计算基金额
		let change_selValue_balance = (item: any) => {
			if (item.contractId == '' || item.firstClassCommission == '' || item.secondClassCommission == '' || item.secondClassBill == '') {
				return;
			}
			// 备注：2022.3.2第三次更改删除 发票余额的计算
			// axios_selValue_balance({
			// 	contractId: item.contractId,
			// 	first: item.firstClassCommission,
			// 	second: item.secondClassCommission,
			// 	secondValue: item.secondClassBill,
			// }).then((res) => {
			// 	if (res.code == 200) {
			// 		if (item.iswebAdd) {
			// 			// 前端的数据
			// 			state.tableData.forEach((item_data, itemdata_index) => {
			// 				if (item_data.webid == item.webid) {
			// 					// console.log(itemdata_index,'itemdata_index')
			// 					item_data.balance = res.data.balance;
			// 				}
			// 			});
			// 		} else {
			// 			state.tableData.forEach((item_data, itemdata_index) => {
			// 				if (item_data.id == item.id) {
			// 					// console.log(itemdata_index,'itemdata_index')
			// 					item_data.balance = res.data.balance;
			// 				}
			// 			});
			// 		}
			// 	}
			// });
		};

		const showAmendFun = () => {
			if (state.selecttableData.length == 1) {
				let row = state.selecttableData[0];
				row.hghligHt = true;
				const $table = xTable1.value;
				$table.setActiveRow(row);
			} else if (state.selecttableData.length == 0) {
				VXETable.modal.message({ content: '您还没有选中行', status: 'warning' });
			} else {
				VXETable.modal.message({ content: '只能选中一行编辑', status: 'warning' });
			}
		};

		// 改变颜色样式
		const rowClassName: VxeTablePropTypes.RowClassName = ({ row }) => {
			// console.log(row, 'rowIndex');
			if (row.hghligHt) {
				return 'row-green';
			}
			return null;
		};

		const footerMethod: VxeTablePropTypes.FooterMethod = ({ columns, data }) => {
			return [
				columns.map((column, columnIndex) => {
					// console.log(columnIndex, '1');
					if (columnIndex === 6) {
						return `${state.showSun.v1}`;
					}
					if (columnIndex === 7) {
						return `${state.showSun.v2}`;
					}
					if (columnIndex === 8) {
						return `${state.showSun.v3}`;
					}
					if (columnIndex == 9) {
						return `${state.showSun.v4}`;
					}
					if (columnIndex == 10) {
						return `${state.showSun.v5}`;
					}
					return '';
				}),
			];
		};

		return {
			showAmendFun,
			...toRefs(state),
			editClosedEvent, //实时更新
			xToolbar, //关联表格
			xTable1, //表格
			addDefaultBlank, //新增空白行
			deleteTable, //删除数据
			funnelEvent, //导出数据
			printTab, //打印
			getSelectLabel,
			getSelectLabel_unitName,
			getSelectLabel_contractName,
			getcontractNameList, //获取项目数据
			change_selValue_fs, //计算获取第一第二提成额
			change_selValue_balance, //计算金额

			selectAllChangeEvent1,
			selectChangeEvent1,
			input: ref(''),
			searchEvent,
			resetEvent,
			transitionNumber,
			rowClassName,
			footerMethod,
		};
	},
};
</script>

<style scoped lang="scss">
.mytable-style ::v-deep .vxe-body--row.row-green {
	background-color: #bbb;
	color: #fff;
}
</style>
